<template>
  <div class="common-layout">
    <el-container id="container">
      <el-main>
        <div id="condition">
          <el-button type="primary" @click="handleAdd" size="large">新增</el-button>
          <div>
            <el-select v-model="movieTypeFilter" placeholder="请选择电影类型" style="width: 240px" size="large"
                       clearable>
              <el-option v-for="type in movieTypes" :key="type.mtId" :label="type.mtName" :value="type.mtId"/>
            </el-select>
            <el-input v-model="movieNameFilter" style="width: 240px" placeholder="请输入电影名称" size="large"
                      clearable/>
            <el-select v-model="statusFilter" placeholder="请选择状态" style="width: 240px" size="large" clearable>
              <el-option :label="'正在上映'" :value="10"/>
              <el-option :label="'下架'" :value="20"/>
            </el-select>
            <el-button type="success" @click="handleQuery" size="large">查询</el-button>
          </div>
        </div>

        <div id="tableDiv">
          <el-table id="table"
                    :data="tableData"
                    border
                    size="large"
                    table-layout="fixed"
                    show-overflow-tooltip
                    style="text-align: center">
            <el-table-column prop="mid" label="电影ID"/>
            <el-table-column prop="mtId" label="电影类型ID"/>
            <el-table-column prop="mtName" label="电影类型"/>
            <el-table-column prop="releaseAt" label="上映时间"/>
            <el-table-column prop="mName" label="电影名称"/>
            <el-table-column prop="mDetail" label="电影详情"/>
            <el-table-column prop="fgName" label="电影外名"/>
            <el-table-column prop="mDuration" label="电影时长"/>
            <el-table-column prop="mPic" label="电影海报">
              <template v-slot="{ row }">
                <el-image :src="imgPrefix + row.mPic" fit="cover" style="max-height: 100px; max-width: 100px"/>
              </template>
            </el-table-column>
            <el-table-column prop="mStatus" label="状态">
              <template #default="scope">
                <span v-if="scope.row.mStatus === '10'">正在上映</span>
                <span v-if="scope.row.mStatus === '20'">下架</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="240">
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                <el-button size="small" type="info" @click="handleDetails(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>

      <el-footer>
        <div id="pagination">
          <el-pagination
              style="float:right"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20, 50]"
              :current-page="currentPage"
              :total="totalCount"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              background
              layout="total, sizes, prev, pager, next, jumper"
          />
        </div>
      </el-footer>
    </el-container>

    <!-- 新增电影对话框 -->
    <el-dialog v-model="addDialog" title="新增电影" width="1200" center>
      <el-form :model="newMovie" size="large">
        <el-form-item label="电影名称">
          <el-input v-model="newMovie.mName" placeholder="请输入电影名称"/>
        </el-form-item>
        <el-form-item label="电影外名">
          <el-input v-model="newMovie.fgName" placeholder="请输入电影外名"/>
        </el-form-item>
        <el-form-item label="电影详情">
          <el-input v-model="newMovie.mDetail" type="textarea" placeholder="请输入电影详情"/>
        </el-form-item>
        <el-form-item label="电影时长">
          <el-input v-model="newMovie.mDuration" placeholder="请输入电影时长（分钟）"/>
        </el-form-item>
        <el-form-item label="选择电影类型">
          <el-select v-model="newMovie.mtId" placeholder="请选择电影类型" style="width: 240px" clearable>
            <el-option v-for="type in movieTypes" :key="type.mtId" :label="type.mtName" :value="type.mtId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="上映时间">
          <el-date-picker v-model="newMovie.releaseAt" type="datetime" placeholder="请选择上映时间"
                          style="width: 240px"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="newMovie.mStatus" placeholder="请选择电影状态" style="width: 240px"
                     size="large"
                     clearable>
            <el-option :label="'正在上映'" :value="'10'"/>
            <el-option :label="'下架'" :value="'20'"/>
          </el-select>
        </el-form-item>
        <el-form-item label="电影海报">
          <el-upload
              v-model:file-list="fileList"
              ref="uploadRef"
              :action="baseIp+':9090/upload/uploadFile'"
              :show-file-list="false"
              :auto-upload="false"
              accept=".jpg,.jpeg,.png,.bmp"
              :on-change="handleFileChange"
              :on-success="handleSuccess"
              :on-error="handleError"
              style="margin:0 auto;"
          >
            <el-tooltip
                class="box-item"
                effect="light"
                content="点击添加电影海报"
                placement="top-start"
            >
              <el-avatar :size="100" :src="mPicUrlDefault"/>
            </el-tooltip>
          </el-upload>
        </el-form-item>

        <el-form-item label="演员列表">
          <el-button @click="addCastMember">新增演职人员</el-button>
          <el-table :data="newMovie.actorList" style="width: 100%">
            <el-table-column label="选择演员">
              <template v-slot="{row}">
                <el-select v-model="row.aid" placeholder="请选择演员" style="width: 240px" size="large"
                           clearable>
                  <el-option v-for="actor in actors" :key="actor.aid" :label="actor.aName" :value="actor.aid"/>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column label="是否为导演" prop="isDirector">
              <template v-slot="{row}">
                <el-select v-model="row.isDirector" placeholder="请选择是否为导演" style="width: 240px"
                           size="large"
                           clearable>
                  <el-option :label="'是'" :value="'0'"/>
                  <el-option :label="'否'" :value="'1'"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="角色名称" prop="mRole">
              <template v-slot="{row}">
                <el-input v-model="row.mRole" placeholder="请输入角色名称" style="width: 240px" size="large"
                          clearable/>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" type="danger" @click="removeCastMember(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelAddMovie">取消</el-button>
          <el-button type="primary" @click="handleAddMovie">新增</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑电影对话框 -->
    <el-dialog v-model="editDialog" title="编辑电影" width="1200" center>
      <el-form :model="movieActorChange" size="large">
        <el-form-item label="电影名称">
          <el-input v-model="movieActorChange.mName" placeholder="请输入电影名称"/>
        </el-form-item>
        <el-form-item label="电影外名">
          <el-input v-model="movieActorChange.fgName" placeholder="请输入电影外名"/>
        </el-form-item>
        <el-form-item label="电影详情">
          <el-input v-model="movieActorChange.mDetail" type="textarea" placeholder="请输入电影详情"/>
        </el-form-item>
        <el-form-item label="电影时长">
          <el-input v-model="movieActorChange.mDuration" placeholder="请输入电影时长（分钟）"/>
        </el-form-item>
        <el-form-item label="选择电影类型">
          <el-select v-model="movieActorChange.mtId" placeholder="请选择电影类型" style="width: 240px" clearable>
            <el-option v-for="type in movieTypes" :key="type.mtId" :label="type.mtName" :value="type.mtId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="上映时间">
          <el-date-picker v-model="movieActorChange.releaseAt" type="datetime" placeholder="请选择上映时间"
                          style="width: 240px"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="movieActorChange.mStatus" placeholder="请选择电影状态" style="width: 240px"
                     size="large"
                     clearable>
            <el-option :label="'正在上映'" :value="'10'"/>
            <el-option :label="'下架'" :value="'20'"/>
          </el-select>
        </el-form-item>
        <el-form-item label="电影海报">
          <el-upload
              v-model:file-list="fileList2"
              ref="uploadRef2"
              :action="baseIp+':9090/upload/uploadFile'"
              :show-file-list="false"
              :auto-upload="false"
              accept=".jpg,.jpeg,.png,.bmp"
              :on-change="handleFileChange2"
              :on-success="handleSuccess2"
              :on-error="handleError2"
              style="margin:0 auto;"
          >
            <el-tooltip
                class="box-item"
                effect="light"
                content="点击添加电影海报"
                placement="top-start"
            >
              <el-avatar :size="100" :src="mPicUrlExist"/>
            </el-tooltip>
          </el-upload>
        </el-form-item>

        <el-form-item label="演员列表">
          <el-button @click="addCastMember2">添加演职人员</el-button>
          <el-table :data="movieActorChange.actorList" style="width: 100%">
            <el-table-column label="选择演员">
              <template v-slot="{row}">
                <el-select v-model="row.aid" placeholder="请选择演员" style="width: 240px" size="large" clearable>
                  <el-option v-for="actor in actors" :key="actor.aid" :label="actor.aName" :value="actor.aid"/>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column label="是否为导演" prop="isDirector">
              <template v-slot="{row}">
                <el-select v-model="row.isDirector" placeholder="请选择是否为导演" style="width: 240px"
                           size="large"
                           clearable>
                  <el-option :label="'是'" :value="'0'"/>
                  <el-option :label="'否'" :value="'1'"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="角色名称" prop="mRole">
              <template v-slot="{row}">
                <el-input v-model="row.mRole" placeholder="请输入角色名称" style="width: 240px" size="large"
                          clearable v-if="row.isDirector!=='0'"/>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="small" type="danger" @click="removeCastMember2(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelEditMovie">取消</el-button>
          <el-button type="primary" @click="handleEditMovie">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看电影详情对话框 -->
    <el-dialog v-model="detailDialog" title="电影详情" width="800" center>
      <div id="moviePicAndDesp">
        <el-image :src="imgPrefix+movieDetail.mPic" fit="fit"/>
        <div id="movieDescription">
          <el-form style="margin-top: 20px" v-model="movieDetail" size="large">
            <el-form-item label="电影名称">
              <el-text style="font-weight:bold;">{{ movieDetail.mName }}</el-text>
            </el-form-item>
            <el-form-item label="电影外名">
              <el-text style="font-weight:bold;">{{ movieDetail.fgName }}</el-text>
            </el-form-item>
            <el-form-item label="时长">
              <el-text style="font-weight:bold;">{{ movieDetail.mDuration }}</el-text>
            </el-form-item>
            <el-form-item label="上映时间">
              <el-text style="font-weight:bold;">{{ movieDetail.releaseAt }}</el-text>
            </el-form-item>
            <el-form-item label="电影类型">
              <el-text>
                <el-tag size="small" style="font-weight:bold;">{{ movieDetail.mtName }}</el-tag>
              </el-text>
            </el-form-item>
            <el-form-item label="电影介绍">
              <el-text tag="b" style="text-align: left">
                {{ movieDetail.mDetail }}
              </el-text>
            </el-form-item>
            <el-form-item label="电影平均评分">
              <el-rate
                  v-model="movieDetail.avgMovieScore"
                  disabled
                  show-score
                  :icons="icons"
                  :void-icon="StarFilled"
                  :colors="['#000000', '#136add', '#ff0019']"/>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <el-button @click="detailDialog = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {ref, reactive, onMounted, inject, getCurrentInstance} from 'vue';
import {ElNotification, ElMessageBox, ElUpload} from 'element-plus';
import request from '@/request.js'
import {request2} from '@/request';
import sessionStorage from "@/SessionStorage.js";
import {StarFilled} from "@element-plus/icons-vue";
import axios from "axios";
import qs from "qs";  // 使用封装的request2
const baseIp = import.meta.env.VITE_APP_API_URL;
const imgPrefix = inject('imgPrefix');
const {proxy} = getCurrentInstance();
// 过滤器、分页和表格数据
const movieTypeFilter = ref('');
const movieNameFilter = ref('');
const statusFilter = ref('');
const currentPage = ref(1);
const pageSize = ref(5);
const totalCount = ref(0);
const tableData = reactive([]);

// 对话框状态
const addDialog = ref(false);
const editDialog = ref(false);
const detailDialog = ref(false);
const mPicTable = ref(null);

// 表单数据
const newMovie = reactive({
  mName: '',
  fgName: '',
  mDetail: '',
  mDuration: '',
  mtId: null,
  releaseAt: null,
  mPic: null,
  mStatus: null,
  actorList: [
    {
      aid: null,
      isDirector: null,
      mRole: null,
    }
  ]
});
// 用于编辑电影的表单数据
const movieActorChange = reactive({
  mid: -1,
  mtId: -1,
  mtName: "",
  releaseAt: "",
  mName: "",
  mDetail: "",
  fgName: "",
  mDuration: "",
  mPic: "",
  avgMovieScore: 0.0,
  actorList: [
    {
      aid: -1,
      aName: "",
      aPic: "",
      mRole: "",
      isDirector: ""
    }
  ]
});
const movieTypes = ref([]);  // 电影类型列表
const movieDetail = reactive({
  mid: -1,
  mtId: -1,
  mtName: "",
  releaseAt: "",
  mName: "",
  mDetail: "",
  fgName: "",
  mDuration: "",
  mPic: "",
  avgMovieScore: 0.0,
  actorList: [
    {
      aid: -1,
      aName: "",
      aPic: "",
      mRole: "",
      isDirector: ""
    }
  ]
})

const actors = ref([]);
// 查询电影类型数据
const fetchMovieTypes = () => {
  request({url: '/movieType/selectAll', method: 'get'}).then(res => {
    if (res.code === '200' && res.data) {
      movieTypes.value = res.data;
    }
  });
};
const fetchActors = () => {
  request2({url: '/actor/listAll', method: 'get'}).then(res => {
    if (res.code === '200' && res.data) {
      actors.value = res.data;

    }
  });
}

// 查询电影列表
const queryConsoleDto = {
  mtId: movieTypeFilter.value,
  mName: movieNameFilter.value,
  mStatus: statusFilter.value,
  pageNo: currentPage.value,
  pageSize: pageSize.value
};
const handleQuery = () => {

  // 刷新值
  queryConsoleDto.mtId = movieTypeFilter.value;
  queryConsoleDto.mName = movieNameFilter.value;
  queryConsoleDto.mStatus = statusFilter.value;
  queryConsoleDto.pageNo = currentPage.value;
  queryConsoleDto.pageSize = pageSize.value;

  request2({url: '/movie/list', method: 'post', data: queryConsoleDto}).then(res => {
    if (res.code === '200' && res.data) {
      tableData.splice(0, tableData.length);
      tableData.push(...res.data.list);
      totalCount.value = res.data.totalCount;
    }
  });
};

// 新增电影
const handleAdd = () => {
  addDialog.value = true;
};
// 新增电影取消
const cancelAddMovie = () => {
  newMovie.actorList.splice(0, newMovie.actorList.length);
  newMovie.actorList.push({
    aid: null,
    isDirector: null,
    mRole: null,
  })
  addDialog.value = false;
}

const cancelEditMovie = () => {


  editDialog.value = false;
}

// 新增电影请求
const handleAddMovie = () => {
// 头像没变化，ossUPic使用旧的即可，然后直接修改用户信息
  if (mPicUrlDefault.value === imgPrefix + "defaultHeaderCircle.png") {
    reqAdd();
  } else {
    // 头像有变化，则先调用后端接口上传oss，利用文件成功上传的回调函数拿到返回给前端的图片名，然后携带输入框信息一起更新
    // 保留最新的最后一个，然后上传
    const uploadRefObj = proxy.$refs.uploadRef;
    uploadRefObj.submit();
  }


};

const reqAdd = (mPic) => {
  newMovie.mPic = "defaultHeaderCircle.png";
  // 此时这里的uPic需要去掉imgPrefix，只保留文件名
  if (mPicUrlDefault.value !== imgPrefix + "defaultHeaderCircle.png") {
    newMovie.mPic = mPic;
  }
  request2({url: '/movie/addMovie', method: 'post', data: newMovie}).then(res => {
    if (res.code === '200') {
      ElNotification.success('新增成功');
      addDialog.value = false;
      handleQuery();
    }
  });
}

// 编辑电影
const handleEdit = (row) => {
  movieActorChange.mid = row.mid;
  movieActorChange.mName = row.mName;
  movieActorChange.fgName = row.fgName;
  movieActorChange.mDetail = row.mDetail;
  movieActorChange.mDuration = row.mDuration;
  movieActorChange.mtId = row.mtId;
  movieActorChange.mStatus = row.mStatus;
  movieActorChange.releaseAt = row.releaseAt;
  movieActorChange.mPic = row.mPic;

  // 暂存表格头像
  mPicTable.value = movieActorChange.mPic;
  // 回显头像
  mPicUrlExist.value = imgPrefix + row.mPic;

  // 回显演职员
  // 先清除旧的，然后填充新的

  movieActorChange.actorList.splice(0, movieActorChange.actorList.length);
  tableData.forEach(movie => {
    if (movie.movieActorVoList[0] !== null && movie.movieActorVoList.length !== 1 && movie.mid === row.mid) {
      movieActorChange.actorList.push(...movie.movieActorVoList);
    }
  })
  editDialog.value = true;
};

// 编辑电影请求
const handleEditMovie = () => {
  // 头像没变化，ossUPic使用旧的即可，然后直接修改用户信息
  if (mPicUrlExist.value === imgPrefix + mPicTable.value) {
    reqEdit();
  } else {
    // 头像有变化，则先调用后端接口上传oss，利用文件成功上传的回调函数拿到返回给前端的图片名，然后携带输入框信息一起更新
    // 保留最新的最后一个，然后上传
    const uploadRefObj2 = proxy.$refs.uploadRef2;
    uploadRefObj2.submit();
  }
};

const reqEdit = (mPic) => {
  // 此时这里的uPic需要去掉imgPrefix，只保留文件名
  if (mPicUrlExist.value !== imgPrefix + mPicTable.value) {
    movieActorChange.mPic = mPic;
  }

  request2({url: '/movie/updateMovie', method: 'post', data: movieActorChange}).then(res => {
    if (res.code === '200') {
      ElNotification.success('修改成功');
      editDialog.value = false;
      handleQuery();
    }
  });
}

// 删除电影
const handleDelete = (row) => {
  ElMessageBox.confirm('此操作将永久删除该电影，是否继续?', '提示', {type: 'warning'}).then(() => {
    request2({url: `/movie/delete/${row.mid}`, method: 'post'}).then(res => {
      if (res.code === '200') {
        ElNotification.success('删除成功');
        handleQuery();
      }
    });
  });
};

// 查看电影详情
const handleDetails = (row) => {
  request({url: `/movie/getByMid?mid=` + row.mid, method: 'get'}).then(res => {
    if (res.code === '200' && res.data) {
      const movieDetailQuery = res.data;
      movieDetail.mid = movieDetailQuery.mid;
      movieDetail.mtId = movieDetailQuery.mtId;
      movieDetail.mtName = movieDetailQuery.mtName;
      movieDetail.releaseAt = movieDetailQuery.releaseAt;
      movieDetail.mName = movieDetailQuery.mName;
      movieDetail.mDetail = movieDetailQuery.mDetail;
      movieDetail.fgName = movieDetailQuery.fgName;
      movieDetail.mDuration = movieDetailQuery.mDuration;
      movieDetail.mPic = movieDetailQuery.mPic;
      movieDetail.avgMovieScore = movieDetailQuery.avgMovieScore;
      console.log('根据mid查询电影成功！');
      console.log('查看电影详情接口返回的数据：', res.data);
      res.data.movieActorVoList.forEach((item) => {
        movieDetail.actorList.push(item);
      });
      detailDialog.value = true;
    }
  });
};

// 添加演职人员
const addCastMember = () => {
  newMovie.actorList.push({
    aid: null,
    isDirector: null,
    mRole: null,
  });
};
// 添加演职人员2
const addCastMember2 = () => {
  movieActorChange.actorList.push({
    aid: null,
    isDirector: null,
    mRole: null,
  });
};

// 删除演职人员
const removeCastMember = (index) => {
  newMovie.actorList.splice(index, 1);
};
// 删除演职人员2
const removeCastMember2 = (index) => {
  movieActorChange.actorList.splice(index, 1);
};

// 分页操作
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  handleQuery();
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1;
  handleQuery();
};

const mPicUrlDefault = ref(imgPrefix + "defaultHeaderCircle.png");
const mPicUrlExist = ref(null);
// 电影海报新增图片上传
// 海报新增图片上传历史
let fileList = reactive([]);
// 海报编辑图片上传历史
let fileList2 = reactive([]);
const fileTypes = ref(["image/bmp", "image/jpeg", "image/png"]);

const beforeUpload = (file) => {
  const fileType = ref();
  fileType.value = file.raw == null ? file.type : file.raw.type;
  if (!fileTypes.value.includes(fileType.value)) {
    ElNotification.error("只能上传bmp/jpeg/jpg/png图片");
    return false;
  }
  if (file.size / 1024 / 1024 > 2) {
    ElNotification.error("上传图片最大不超过2MB!");
    return false;
  }
  return true;
}

const handleFileChange = (uploadFile, uploadFiles) => {
  if (!beforeUpload(uploadFile.raw)) {
    return;
  }
  // 展示
  const reader = new FileReader();
  reader.onloadend = () => {
    const base64Data = reader.result;
    if (base64Data) {
      // 将Base64数据存储到sessionStorage，键名为'tempAvatar'，方便后续提交时使用
      sessionStorage.setItem('tempAvatar', base64Data);
      mPicUrlDefault.value = base64Data;
    }
  };
  if (uploadFile.raw) {
    console.log("正在读取选择的文件，请稍候...");
    reader.readAsDataURL(uploadFile.raw);
  } else {
    ElNotification.error("没有获取到有效的文件原始数据，无法进行读取操作");
  }

  uploadFiles.forEach(item => {
    console.log("uploadFiles的内容：" + JSON.stringify(item));
  })

  if (uploadFiles.length > 1) {
    const uploadRefObj = proxy.$refs.uploadRef;
    // 1. 清空list
    uploadRefObj.clearFiles();
    // 2. 上传最新的
    uploadRefObj.handleStart(uploadFile.raw);
  }
};
// 文件上传成功后的回调函数
const handleSuccess = (res, file, fileList) => {
  console.log('文件上传成功', res, file, fileList);
  if ('200' === res.code) {
    console.log("后端接口返回正常！");
    const ossUPic = res.data;
    reqAdd(ossUPic);
  }
};
// 文件上传失败后的回调函数
const handleError = (response, file, fileList) => {
  console.log('文件上传失败', response, file, fileList);
  ElNotification.error("图片上传失败！");
};


// 电影海报编辑
const beforeUpload2 = (file) => {
  const fileType = ref();
  fileType.value = file.raw == null ? file.type : file.raw.type;
  if (!fileTypes.value.includes(fileType.value)) {
    ElNotification.error("只能上传bmp/jpeg/jpg/png图片");
    return false;
  }
  if (file.size / 1024 / 1024 > 2) {
    ElNotification.error("上传图片最大不超过2MB!");
    return false;
  }
  return true;
}
const handleFileChange2 = (uploadFile, uploadFiles) => {
  if (!beforeUpload2(uploadFile.raw)) {
    return;
  }
  // 展示
  const reader = new FileReader();
  reader.onloadend = () => {
    const base64Data = reader.result;
    if (base64Data) {
      // 将Base64数据存储到sessionStorage，键名为'tempAvatar'，方便后续提交时使用
      sessionStorage.setItem('tempAvatar2', base64Data);
      mPicUrlExist.value = base64Data;
    }
  };
  if (uploadFile.raw) {
    console.log("正在读取选择的文件，请稍候...");
    reader.readAsDataURL(uploadFile.raw);
  } else {
    ElNotification.error("没有获取到有效的文件原始数据，无法进行读取操作");
  }

  uploadFiles.forEach(item => {
    console.log("uploadFiles的内容：" + JSON.stringify(item));
  })

  if (uploadFiles.length > 1) {
    const uploadRefObj2 = proxy.$refs.uploadRef2;
    // 1. 清空list
    uploadRefObj2.clearFiles();
    // 2. 上传最新的
    uploadRefObj2.handleStart(uploadFile.raw);
  }
};
// 文件上传成功后的回调函数
const handleSuccess2 = (res, file, fileList) => {
  console.log('文件上传成功', res, file, fileList);
  if ('200' === res.code) {
    console.log("后端接口返回正常！");
    const ossUPic = res.data;
    reqEdit(ossUPic);
  }
};
// 文件上传失败后的回调函数
const handleError2 = (response, file, fileList) => {
  console.log('文件上传失败', response, file, fileList);
  ElNotification.error("图片上传失败！");
};

// 页面加载时初始化数据
onMounted(() => {
  fetchMovieTypes();
  fetchActors();
  handleQuery();
});
</script>
<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

#condition {
  display: flex;
  justify-content: space-between;
}

#tableDiv {
  text-align: center;
}

#pagination {
  float: right;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.el-table {
  margin-top: 20px;
}

#moviePicAndDesp {
  display: flex;
  align-items: baseline;
}

#moviePicAndDesp .el-image {
  margin-left: 10px;
  margin-right: 10px;
  width: 2800px;
  height: 644px;
}
</style>
